<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .image-item{
            display: block;
            height: 300px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F611%2F031213123016%2F130312123016-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991666&t=76874be1c94fab4af0dd68c4a1fdbb23" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0R620115Q8%2F200R6115Q8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=0cf8bae98df6c121f944a45b94f79803" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100212531241L-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=1a42fa057e5d63610771a65eb7a59406" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploadfile.bizhizu.cn%2Fup%2Ff1%2Fcd%2F63%2Ff1cd63164d1ff922c286ff631cb22f9b.jpg.source.jpg&refer=http%3A%2F%2Fuploadfile.bizhizu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=67040a66e7b976560fea9b6043d65fd1" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7f%2F36%2Fa4%2F7f36a433869468c953a5477b810a458a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=809fe289b65d0cfcec52011b879a7a57" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe8cfb4048349d22713810b0a3093525a647ec187.jpg&refer=http%3A%2F%2Fi2.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=c5ef0102e74344d3e31d174a3d4b646e" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2015_Website_appreciate%2F2015-04-08%2F20150408140513.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=659f6bd21a902ab8e4b8bd0e24c7dc61" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-11-13%2F5beac0a9e37b0.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=087705ae2314b15c36b2a87868b0eddf" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7f%2F36%2Fa4%2F7f36a433869468c953a5477b810a458a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=809fe289b65d0cfcec52011b879a7a57" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe8cfb4048349d22713810b0a3093525a647ec187.jpg&refer=http%3A%2F%2Fi2.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=c5ef0102e74344d3e31d174a3d4b646e" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2015_Website_appreciate%2F2015-04-08%2F20150408140513.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=659f6bd21a902ab8e4b8bd0e24c7dc61" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7f%2F36%2Fa4%2F7f36a433869468c953a5477b810a458a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=809fe289b65d0cfcec52011b879a7a57" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe8cfb4048349d22713810b0a3093525a647ec187.jpg&refer=http%3A%2F%2Fi2.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=c5ef0102e74344d3e31d174a3d4b646e" alt="">
    <img class="image-item"lazyLOad="true"src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2015_Website_appreciate%2F2015-04-08%2F20150408140513.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991588&t=659f6bd21a902ab8e4b8bd0e24c7dc61" alt="">
    <script>
        let viewHeight = document.documentElement.clientHeight
        // console.log(viewHeight);

        function lazyLoad() {
            let eles = document.querySelectorAll('.image-item')
            // console.log(eles);

            eles.forEach(item =>{
                // console.log(item);
                let rect;
                rect = item.getBoundingClientRect()
                // console.log(rect);
                if(rect.bottom >= 0 && rect.top <viewHeight) { // 在可视区域
                    let img = new Image()
                    img.src = item.dataset.original
                    img.onload = function() {
                        item.src = img.src
                    }
                    item.removeAttribute('data-original')
                    item.removeAttribute('lazyLoad')
                }
            })
        }

        lazyLoad()
        document.addEventListener('scroll',lazyLoad)
    </script>
</body>
</html>